<template>
	<view class="subject-scores-card">
		<view class="card-header">
			<text class="card-title">科目成绩</text>
			<view class="info-icon">ⓘ</view>
		</view>
		
		<!-- 全科模式：显示各科目成绩表格 -->
		<view v-if="selectedSubject === '全科'" class="scores-table">
			<view class="table-header">
				<text class="header-cell">科目名称</text>
				<text class="header-cell">班级平均分</text>
				<text class="header-cell">年级平均分</text>
				<text class="header-cell">年级排名</text>
			</view>
			
			<view class="table-row" v-for="subject in subjectScoresData" :key="subject.name">
				<view class="subject-cell">
					<text class="subject-name">{{ subject.name }}</text>
					<view class="star-rating">
						<text class="star" v-for="star in 5" :key="star" :class="{ filled: star <= subject.rating }">⭐</text>
					</view>
				</view>
				<text class="table-cell">{{ subject.classAverage }}</text>
				<text class="table-cell">{{ subject.gradeAverage }}</text>
				<text class="table-cell">{{ subject.ranking }}</text>
			</view>
		</view>
		
		<!-- 具体学科模式：显示学生分类列表 -->
		<view v-else class="student-categories">
			<view class="category-grid">
				<view class="category-column">
					<view class="category-header">进步明显</view>
					<view class="student-list">
						<view class="student-name improved" v-for="student in studentCategoriesData.improved" :key="student">
							{{ student }}
						</view>
					</view>
				</view>
				
				<view class="category-column">
					<view class="category-header">退步明显</view>
					<view class="student-list">
						<view class="student-name declined" v-for="student in studentCategoriesData.declined" :key="student">
							{{ student }}
						</view>
					</view>
				</view>
				
				<view class="category-column">
					<view class="category-header">班级前5名</view>
					<view class="student-list">
						<view class="student-name top" v-for="student in studentCategoriesData.top5" :key="student">
							{{ student }}
						</view>
					</view>
				</view>
				
				<view class="category-column">
					<view class="category-header">班级后5名</view>
					<view class="student-list">
						<view class="student-name bottom" v-for="student in studentCategoriesData.bottom5" :key="student">
							{{ student }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'SubjectScores',
	props: {
		// 当前选中的科目
		selectedSubject: {
			type: String,
			default: '全科'
		},
		// 全科模式下的科目成绩数据
		subjectScoresData: {
			type: Array,
			default: () => [
				{ name: '语文', classAverage: '500', gradeAverage: '500', ranking: '39', rating: 0 },
				{ name: '数学', classAverage: '500', gradeAverage: '500', ranking: '39', rating: 0 },
				{ name: '历史', classAverage: '500', gradeAverage: '500', ranking: '39', rating: 0 },
				{ name: '政治', classAverage: '500', gradeAverage: '500', ranking: '39', rating: 0 }
			]
		},
		// 具体学科模式下的学生分类数据
		studentCategoriesData: {
			type: Object,
			default: () => ({
				improved: ['孙悟空', '六小龄童', '唐僧', '沙和尚', '红孩儿'],
				declined: ['六小龄童', '沙和尚', '红孩儿', '孙悟空', '唐僧'],
				top5: ['红孩儿', '唐僧', '六小龄童', '孙悟空', '沙和尚'],
				bottom5: ['孙悟空', '沙和尚', '唐僧', '红孩儿', '六小龄童']
			})
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@white: #fff;
@border-color: #f0f0f0;

.subject-scores-card {
	background: @white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.card-title {
			font-size: 28rpx;
			font-weight: bold;
			color: @text-color;
		}

		.info-icon {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			background: #e0e0e0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18rpx;
			color: @text-light;
		}
	}

	.scores-table {
		width: 100%;

		.table-header {
			display: flex;
			background: #f1f3f4;
			padding: 16rpx 0;
			border-radius: 8rpx 8rpx 0 0;
			margin-bottom: 8rpx;

			.header-cell {
				flex: 1;
				text-align: center;
				font-size: 22rpx;
				font-weight: bold;
				color: @text-light;

				&:first-child {
					text-align: left;
					padding-left: 20rpx;
				}
			}
		}

		.table-row {
			display: flex;
			padding: 16rpx 0;
			border-bottom: 1rpx solid @border-color;
			align-items: center;

			&:last-child {
				border-bottom: none;
			}

			.subject-cell {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 8rpx;
				padding-left: 20rpx;

				.subject-name {
					font-size: 24rpx;
					color: @text-color;
					font-weight: 500;
				}

				.star-rating {
					display: flex;
					gap: 2rpx;

					.star {
						font-size: 20rpx;
						color: #ddd;
						
						&.filled {
							color: #FFD700;
						}
					}
				}
			}

			.table-cell {
				flex: 1;
				text-align: center;
				font-size: 24rpx;
				color: @text-color;
			}
		}
	}

	// 学生分类样式
	.student-categories {
		width: 100%;

		.category-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20rpx;

			.category-column {
				display: flex;
				flex-direction: column;

				.category-header {
					font-size: 24rpx;
					color: @text-light;
					font-weight: 500;
					text-align: center;
					margin-bottom: 16rpx;
					padding: 8rpx;
					background: #f8f9fa;
					border-radius: 8rpx;
				}

				.student-list {
					display: flex;
					flex-direction: column;
					gap: 12rpx;

					.student-name {
						font-size: 22rpx;
						padding: 8rpx 12rpx;
						border-radius: 8rpx;
						text-align: center;
						font-weight: 500;

						&.improved {
							background: #E8F5E8;
							color: #4CAF50;
						}

						&.declined {
							background: #FFF3E0;
							color: #FF9800;
						}

						&.top {
							background: #E3F2FD;
							color: #2196F3;
						}

						&.bottom {
							background: #FCE4EC;
							color: #E91E63;
						}
					}
				}
			}
		}
	}
}
</style>
